<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>研修课程</title>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/iconfont/iconfont.css">
</head>

<body>
  <div class="curriculum">
    <div class="l">
      <ul id="leftTab">
        <li>信息技术</li>
        <li class="on">师德师风</li>
        <li>职教理论</li>
        <li>专业知识</li>
        <li>专业能力</li>
        <li>管理能力</li>
      </ul>
    </div>
    <div class="r">
      <div class="resources__title clear">
        <ul id="topTab">
          <li class="on">教材编写</li>
          <li>教法研究</li>
          <li>其他</li>
        </ul>
      </div>
      <ul class="r__list">
        <li>
          <div class="rl">
            <img src="./img/head.png" alt="">
          </div>
          <div class="rr">
            <div class="title">关注教师心理成长</div>
            <div class="name">刘晓明</div>
          </div>
        </li>
        <li>
          <div class="rl">
            <img src="./img/head.png" alt="">
          </div>
          <div class="rr">
            <div class="title">关注教师心理成长</div>
            <div class="name">刘晓明</div>
          </div>
        </li>
        <li>
          <div class="rl">
            <img src="./img/head.png" alt="">
          </div>
          <div class="rr">
            <div class="title">关注教师心理成长</div>
            <div class="name">刘晓明</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script>
    $("#leftTab li").click(function () {
      console.log(this)
      $(this).addClass("on").siblings().removeClass("on");
    });
    $("#topTab li").click(function () {
      console.log(this)
      $(this).addClass("on").siblings().removeClass("on");
    });
  </script>
</body>

</html>